<template>
  <el-dialog
    :title="dataForm.id ? '修改' : '新增'"
    :close-on-click-modal="false"
    v-model="visible"
    width="80%"
    destroy-on-close
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="dataRule"
      label-width="120px"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="联赛编码" prop="leagueCode">
            <el-input v-model="dataForm.leagueCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="左边球队" prop="leftTeamId">
            <el-select
              v-model="dataForm.leftTeamId"
              filterable
              placeholder="左边球队"
              clearable
              :style="{ width: '100%' }"
              @change="changeTeam($event, 'left')"
            >
              <el-option
                v-for="item in teamList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="右边球队" prop="rightTeamId">
            <el-select
              v-model="dataForm.rightTeamId"
              filterable
              placeholder="右边球队"
              clearable
              :style="{ width: '100%' }"
              @change="changeTeam($event, 'right')"
            >
              <el-option
                v-for="item in teamList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="左边球队名称" prop="leftTeamName">
            <el-input
              v-model="dataForm.leftTeamName"
              placeholder="左边球队名称"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="右边球队名称" prop="rightTeamName">
            <el-input
              v-model="dataForm.rightTeamName"
              placeholder="右边球队名称"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="左边球队LOGO" prop="leftTeamLogo">
            <img
              :src="dataForm.leftTeamLogo"
              width="63"
              height="91"
              v-if="dataForm.leftTeamLogo"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="右边球队LOGO" prop="rightTeamLogo">
            <img
              :src="dataForm.rightTeamLogo"
              width="63"
              height="91"
              v-if="dataForm.rightTeamLogo"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="左边球队进球数" prop="leftTeamScore">
            <el-input-number
              type="number"
              :min="0"
              :style="{ width: '100%' }"
              v-model="dataForm.leftTeamScore"
              placeholder="左边球队进球数"
            >
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="右边球队进球数" prop="rightTeamScore">
            <el-input-number
              v-model="dataForm.rightTeamScore"
              placeholder="右边球队进球数"
              :style="{ width: '100%' }"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
                      <el-form-item label="左边球队积分" prop="leftTeamPoints">
                          <el-input-number
                              v-model="dataForm.leftTeamPoints"
                              placeholder="左边球队积分"
                              :style="{width: '100%'}"
                              :min="0"></el-input-number>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="右边球队积分" prop="rightTeamPoints">
                          <el-input-number
                              v-model="dataForm.rightTeamPoints"
                              placeholder="右边球队积分"
                              :style="{width: '100%'}"
                              :min="0"></el-input-number>
                      </el-form-item>
                  </el-col> -->
        <!-- <el-col :span="12">
                      <el-form-item label="上半场比分" prop="firstHalfScore">
                          <el-input v-model="dataForm.firstHalfScore" placeholder="上半场比分"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="下半场比分" prop="secondHalfScore">
                          <el-input v-model="dataForm.secondHalfScore" placeholder="下半场比分"></el-input>
                      </el-form-item>
                  </el-col> -->
        <el-col :span="12">
          <el-form-item label="比赛状态" prop="matchStatus">
            <el-select
              v-model="dataForm.matchStatus"
              placeholder="比赛状态"
              filterable
              clearable
              :style="{ width: '100%' }"
            >
              <!-- @change="changeMatchStatus" -->
              <el-option
                v-for="item in matchStatusData"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="比赛类型" prop="matchTag">
            <el-select
              v-model="dataForm.matchTag"
              filterable
              placeholder="比赛类型"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in matchTagData"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="比赛日期" prop="matchDate">
            <el-date-picker
              v-model="dataForm.matchDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :style="{ width: '100%' }"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="比赛时间" prop="matchTime">
            <el-input
              v-model="dataForm.matchTime"
              placeholder="比赛时间"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否发布" prop="enableFlag">
            <el-switch
              v-model="dataForm.enableFlag"
              :active-value="1"
              :inactive-value="0"
              :style="{ width: '100%' }"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否开启直播" prop="liveFlag">
            <el-switch
              v-model="dataForm.liveFlag"
              active-value="Y"
              inactive-value="N"
              :style="{ width: '100%' }"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="dataForm.liveFlag === 'Y'">
          <el-form-item label="直播链接地址" prop="matchLiveUrl">
            <el-input
              v-model="dataForm.matchLiveUrl"
              placeholder="直播链接地址"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="左边自由球数" prop="leftFreeKick">
            <el-input-number
              type="number"
              :min="0"
              :style="{ width: '100%' }"
              v-model="dataForm.leftFreeKick"
              placeholder="左边自由球数"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="右边自由球数" prop="rightFreeKick">
            <el-input-number
              type="number"
              :min="0"
              :style="{ width: '100%' }"
              v-model="dataForm.rightFreeKick"
              placeholder="右边自由球数"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="左边点球数" prop="leftPenaltyKick">
            <el-input-number
              type="number"
              :min="0"
              :style="{ width: '100%' }"
              v-model="dataForm.leftPenaltyKick"
              placeholder="左边点球数"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="右边点球数" prop="rightPenaltyKick">
            <el-input-number
              type="number"
              :min="0"
              :style="{ width: '100%' }"
              v-model="dataForm.rightPenaltyKick"
              placeholder="右边点球数"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="上半场信息填报" :name="1">
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item
                    label="左边进球数"
                    prop="firstHalfLeftTeamScore"
                  >
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.firstHalfLeftTeamScore"
                      placeholder="左边进球数"
                      @change="
                        (value) => {
                          dataForm.leftTeamScore =
                            value + (dataForm.secondHalfLeftTeamScore || 0);
                        }
                      "
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="右边进球数"
                    prop="firstHalfRightTeamScore"
                  >
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.firstHalfRightTeamScore"
                      placeholder="右边进球数"
                      @change="
                        (value) => {
                          dataForm.rightTeamScore =
                            value + (dataForm.secondHalfRightTeamScore || 0);
                        }
                      "
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="左边黄牌数"
                    prop="firstHalfLeftYellowCard"
                  >
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.firstHalfLeftYellowCard"
                      placeholder="左边黄牌数"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="右边黄牌数"
                    prop="firstHalfRightYellowCard"
                  >
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.firstHalfRightYellowCard"
                      placeholder="右边黄牌数"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="左边红牌数" prop="firstHalfLeftRedCard">
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.firstHalfLeftRedCard"
                      placeholder="左边红牌数"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="右边红牌数" prop="firstHalfRightRedCard">
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.firstHalfRightRedCard"
                      placeholder="右边红牌数"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="左边角球数"
                    prop="firstHalfLeftCornerKick"
                  >
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.firstHalfLeftCornerKick"
                      placeholder="左边角球数"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="右边角球数"
                    prop="firstHalfRightCornerKick"
                  >
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.firstHalfRightCornerKick"
                      placeholder="右边角球数"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-collapse-item>
            <el-collapse-item title="下半场信息填报" :name="2">
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item
                    label="左边进球数"
                    prop="secondHalfLeftTeamScore"
                  >
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.secondHalfLeftTeamScore"
                      placeholder="左边进球数"
                      @change="
                        (value) => {
                          dataForm.leftTeamScore =
                            value + (dataForm.firstHalfLeftTeamScore || 0);
                        }
                      "
                    >
                    </el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="右边进球数"
                    prop="secondHalfRightTeamScore"
                  >
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.secondHalfRightTeamScore"
                      placeholder="右边进球数"
                      @change="
                        (value) => {
                          dataForm.rightTeamScore =
                            value + (dataForm.firstHalfRightTeamScore || 0);
                        }
                      "
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="左边黄牌数"
                    prop="secondHalfLeftYellowCard"
                  >
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.secondHalfLeftYellowCard"
                      placeholder="左边黄牌数"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="右边黄牌数"
                    prop="secondHalfRightYellowCard"
                  >
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.secondHalfRightYellowCard"
                      placeholder="右边黄牌数"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="左边红牌数" prop="secondHalfLeftRedCard">
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.secondHalfLeftRedCard"
                      placeholder="左边红牌数"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="右边红牌数"
                    prop="secondHalfRightRedCard"
                  >
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.secondHalfRightRedCard"
                      placeholder="右边红牌数"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="左边角球数"
                    prop="secondHalfLeftCornerKick"
                  >
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.secondHalfLeftCornerKick"
                      placeholder="左边角球数"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="右边角球数"
                    prop="secondHalfRightCornerKick"
                  >
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.secondHalfRightCornerKick"
                      placeholder="右边角球数"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-collapse-item>
            <el-collapse-item title="加时赛信息填报" :name="3">
              <el-row :gutter="24">
                <el-col :span="24">
                  <el-form-item label="是否加时" prop="overtimeFlag">
                    <el-switch
                      v-model="dataForm.overtimeFlag"
                      active-value="Y"
                      inactive-value="N"
                      :style="{ width: '100%' }"
                    >
                    </el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="左边进球数" prop="leftTeamOvertimeScore">
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.leftTeamOvertimeScore"
                      placeholder="左边进球数"
                      :disabled="dataForm.overtimeFlag !== 'Y'"
                    >
                    </el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="右边进球数"
                    prop="rightTeamOvertimeScore"
                  >
                    <el-input-number
                      type="number"
                      :min="0"
                      :style="{ width: '100%' }"
                      v-model="dataForm.rightTeamOvertimeScore"
                      placeholder="右边进球数"
                      :disabled="dataForm.overtimeFlag !== 'Y'"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
    </el-form>
    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { request } from "@/utils/axios-util";
import { matchStatusData, matchTagData } from "./config";

export default {
  data() {
    return {
      visible: false,
      matchStatusData,
      matchTagData,
      dataForm: { leagueCode: "", enableFlag: 0, liveFlag: "N" },
      dataRule: {
        leftTeamId: [
          { required: true, message: "左边球队不能为空", trigger: "change" },
        ],
        rightTeamId: [
          { required: true, message: "右边球队不能为空", trigger: "change" },
        ],
        matchStatus: [
          { required: true, message: "比赛状态不能为空", trigger: "change" },
        ],
        matchTag: [
          { required: true, message: "比赛类型不能为空", trigger: "change" },
        ],
        matchDate: [
          { required: true, message: "比赛日期不能为空", trigger: "change" },
        ],
        matchTime: [
          { required: true, message: "比赛时间不能为空", trigger: "change" },
        ],
        enableFlag: [
          { required: true, message: "是否发布不能为空", trigger: "change" },
        ],
        liveFlag: [
          {
            required: true,
            message: "是否开启直播不能为空",
            trigger: "change",
          },
        ],
      },
      id: "",
      teamList: [],
      leagueCodeInit: "",
      activeNames: [],
    };
  },
  mounted() {
    const userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.leagueCodeInit = userInfo.leagueCode || "MFEL2024S02";
    this.getTeamList();
  },
  methods: {
    init(id) {
      this.id = id;
      if (id) {
        this.activeNames = [1, 2];
        request("/admin/leagueMatch/get", { id }, "GET").then(
          (res) => {
            if (res.code === 200) {
              this.dataForm = res.data;

              const score1 =
                this.dataForm.firstHalfScore &&
                this.dataForm.firstHalfScore.split(":");
              const score2 =
                this.dataForm.firstHalfScore &&
                this.dataForm.secondHalfScore.split(":");
              this.dataForm.firstHalfLeftTeamScore = score1 && score1[0];
              this.dataForm.firstHalfRightTeamScore = score1 && score1[1];
              this.dataForm.secondHalfLeftTeamScore = score1 && score2[0];
              this.dataForm.secondHalfRightTeamScore = score1 && score2[1];
            } else {
              this.$message.error(res.message);
            }
          },
          (resp) => {
            this.$message.error("数据获取失败，", resp);
          }
        );
      } else {
        this.dataForm = { leagueCode: "", enableFlag: 0, liveFlag: "N" };
        this.dataForm.leagueCode = this.leagueCodeInit;
        this.activeNames = [];
      }
      this.visible = true;
    },
    changeTeam(e, type) {
      let obj = { name: "", logoUrl: "" };
      if (e) {
        obj = this.teamList.find((item) => item.id == e);
      }
      this.dataForm = {
        ...this.dataForm,
        [`${type}TeamName`]: obj.name,
        [`${type}TeamLogo`]: obj.logoUrl,
      };
      console.log(e, obj, this.dataForm);
    },
    // changeMatchStatus(value) {
    //     if (value === 'END') {
    //         this.dataRule = {
    //             ...this.dataRule,
    //             firstHalfScore: [{required: true, message: '上半场比分不能为空', trigger: 'change'}],
    //             secondHalfScore: [{required: true, message: '下半场比分不能为空', trigger: 'change'}]
    //         };
    //     } else {
    //         delete this.dataRule.firstHalfScore;
    //         delete this.dataRule.secondHalfScore;
    //         this.dataRule = {...this.dataRule};
    //     }
    //     this.$refs.dataForm.clearValidate(['firstHalfScore', 'secondHalfScore']);
    // },
    // 获取球队信息
    getTeamList() {
      request(
        "/portal/leagueInfo/teamInfo?leagueCode=" + this.leagueCodeInit,
        {},
        "GET"
      ).then(
        (res) => {
          if (res.code === 200) {
            this.teamList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        },
        (resp) => {
          this.$message.error("数据获取失败，", resp);
        }
      );
    },
    // 更新数据列表
    dataFormSubmit() {
      this.dataForm.firstHalfScore = `${
        this.dataForm.firstHalfLeftTeamScore || 0
      }:${this.dataForm.firstHalfRightTeamScore || 0}`;
      this.dataForm.secondHalfScore = `${
        this.dataForm.secondHalfLeftTeamScore || 0
      }:${this.dataForm.secondHalfRightTeamScore || 0}`;
      const data = {
        ...this.dataForm,
        historyFlag: 0,
      };

      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          const url = this.id
            ? "/admin/leagueMatch/update"
            : "/admin/leagueMatch/add";
          request(url, data, "POST").then(
            (res) => {
              if (res.code === 200) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.visible = false;
                    $emit(this, "refreshDataList");
                  },
                });
              } else {
                this.$message.error(res.msg);
              }
            },
            (resp) => {
              this.$message.error("操作失败，", resp);
            }
          );
        }
      });
    },
  },
  emits: ["refreshDataList"],
};
</script>
